<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="菜单列表"
      row-key="id"
      :indent="15"
      :columns="columns"
      :request-api="menuTree"
      :pagination="false"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="toDetail(0)" v-auth="'add'">{{ $t("common.add") }}</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>

      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="toDetail(scope.row.id)" v-auth="'modify'">{{
          $t("common.edit")
        }}</el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)" v-auth="'delete'">{{
          $t("common.del")
        }}</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="menuMange">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { menuTree, menuUpdateHide, menuDel } from "@/api/modules/system";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { BUTTONS } = useAuthButtons();

const proTable = ref();
const router = useRouter();
const { t } = useI18n();
// 跳转详情页
const toDetail = (id: number) => {
  if (id > 0) {
    router.push(`/system/menu/modify/${id}`);
  } else {
    router.push(`/system/menu/create`);
  }
};

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "id", label: "ID", width: 200, align: "left" },
  { prop: "type", label: t("system.menu.type"), width: 85 },
  { prop: "title", label: t("system.menu.title"), width: 220 },
  { prop: "auth", label: t("system.menu.auth"), width: 85 },
  { prop: "icon", label: t("system.menu.icon"), width: 60 },
  { prop: "path", label: t("system.menu.path") },
  { prop: "api", label: t("system.menu.api") },
  {
    prop: "is_hide",
    label: t("system.menu.is_hide"),
    enum: [
      { label: t("system.menu.show"), value: 0 },
      { label: t("system.menu.hide"), value: 1 }
    ],
    width: 120,
    render: scope => {
      return (
        <>
          {BUTTONS.value.hide ? (
            <el-switch
              model-value={scope.row.is_hide}
              active-text={scope.row.is_hide ? t("system.menu.hide") : t("system.menu.show")}
              active-value={0}
              inactive-value={1}
              onClick={() => changeHide(scope.row)}
            />
          ) : (
            <el-tag type={scope.row.is_hide ? "danger" : "success"}>
              {scope.row.is_hide ? t("system.menu.hide") : t("system.menu.show")}
            </el-tag>
          )}
        </>
      );
    }
  },
  { prop: "operation", label: t("common.operation"), width: 250, fixed: "right" }
];

const changeHide = async (row: object) => {
  menuUpdateHide({ id: row.id, is_hide: row.is_hide ? 0 : 1 }).then(response => {
    proTable.value.getTableList();
    ElMessage.success(response.message);
  });
};

// 删除菜单（示例、根据自己后端接口来）
const deleteMenu = async (params: Menu.MenuOptions) => {
  await useHandleData(menuDel, { id: params.id }, `删除【${params.title}】菜单`);
  proTable.value.getTableList();
};
</script>
